﻿<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>漂亮的jQuery日期范围选择插件 - 素材家园</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="dateRange.js"></script>
<script type="text/javascript" src="monthPicker.js"></script>
<link rel="stylesheet" type="text/css" href="dateRange.css"/>
<link rel="stylesheet" type="text/css" href="monthPicker.css"/>
<style type="text/css">
::selection {
	background-color: #E13300;
	color: white;
}
::moz-selection {
	background-color: #E13300;
	color: white;
}
::webkit-selection {
	background-color: #E13300;
	color: white;
}
body {
	background-color: #fff;
	margin: 40px;
	font: 12px     /20px normal Helvetica, Arial, sans-serif;
	color: #4F5155;
}
a {
	color: #003399;
	background-color: transparent;
	font-weight: normal;
}
input {
	color: #333333;
	font: 12px /1.5 Tahoma, Helvetica, 'SimSun', sans-serif;
}
code {
	font-family: Consolas, Monaco, Courier New, Courier, monospace;
	font-size: 12px;
	background-color: #f9f9f9;
	border: 1px solid #D0D0D0;
	color: #002166;
	display: block;
	margin: 14px 0 14px 0;
	padding: 12px 10px 12px 10px;
}
h1 {
	color: #444;
	background-color: transparent;
	border-bottom: 1px solid #D0D0D0;
	font-size: 19px;
	font-weight: normal;
	margin: 0 0 14px 0;
	padding: 14px 15px 10px 15px;
}
.wrapper {
	margin: 0 15px 0 15px;
}

</style>
</head>

<body bgcolor="white" text="black">
	<h1>Calendar Demo</h1>
	<div class="wrapper">
		<!-- calendar demo1 :start -->
		
		<!-- calendar demo 2 :end-->
		
		<!-- calendar demo 3 : start-->
		<h4>一、选择单天的时间段选择(TA的日期选择器)：</h4>
		<div id="dCon_demo3">
			开始时间：2013-04-14
			<br/>
			结束时间：2013-04-14
			<br/>
		</div>
		<div>
		<a href="javascript:;" id="aRecent7DaysDemo3" >最近七天</a>
		</div>
		 <div class="ta_date" id="div_date_demo3">
				<span class="date_title" id="date_demo3"></span>
				<a class="opt_sel" id="input_trigger_demo3" href="#">
					<i class="i_orderd"></i>
				</a>
			</div>
			<div id="datePicker"></div>
		<br/>
		<script type="text/javascript">
			var dateRange = new pickerDateRange('date_demo3', {
				aRecent7Days : 'aRecent7DaysDemo3', //最近7天
				isTodayValid : false,
				//startDate : '2013-04-14',
				//endDate : '2013-04-21',
				//needCompare : true,
				//isSingleDay : true,
				//shortOpr : true,
				defaultText : ' 至 ',
				inputTrigger : 'input_trigger_demo3',
				theme : 'ta',
				success : function(obj) {
					$("#dCon_demo3").html('开始时间 : ' + obj.startDate + '<br/>结束时间 : ' + obj.endDate);
				}
			});

		</script>
		<br/>
		<p>
			示例代码：(更多参数，参见用户手册)
		</p>
		<code>
			&lt;script type="text/javascript"&gt;
			<br/>
			var dateRange = new pickerDateRange('date', {
			<br/>
			isTodayValid : true,
			<br/>
			startDate : '2013-04-14',
			<br/>
			endDate : '2013-04-21',
			<br/>
			<!-- isSingleDay : true,
			<br/> -->
			theme : 'ta',
			<br/>
			defaultText : ' 至 ',
			<br/>
			success : function(obj) {
			<br/>
			//设置回调句柄
			<br/>
			}
			<br/>
			});
			<br/>
			&lt;/script&gt;
			<br/>
		</code>
		<!-- END -->
<!-- 			<iframe src="/portal/views/calendar_month.php" height="500" width="100%" frameborder="0"></iframe> -->

		<h4>二、支持点击结束日期自动提交，无须确定按钮(ta,gri主题均支持)：</h4>
		<div id="dCon2">
			开始时间：2012-06-14
			<br/>
			结束时间：2012-07-10
			<br/>
		</div>
		<!-- <div id="datePicker">
			<input type="text" name="date" id="date" value="" class="gri_date" style="float:left"/>
		</div -->
		 <div class="ta_date" id="div_date1">
				<span class="date_title" id="date1"></span>
				<a class="opt_sel" id="input_trigger1" href="#">
					<i class="i_orderd"></i>
				</a>
			</div>
			<div id="datePicker1"></div>
		<br/>
		<script type="text/javascript">
			//var STATS_START_TIME = '1329148800';
			var dateRange1 = new pickerDateRange('date1', {
				isTodayValid : true,
				startDate : '2012-06-14',
				endDate : '2012-07-10',
				needCompare : false,
				defaultText : ' 至 ',
				autoSubmit : true,
				inputTrigger : 'input_trigger1',
				theme : 'ta',
				success : function(obj) {
					$("#dCon2").html('开始时间 : ' + obj.startDate + '<br/>结束时间 : ' + obj.endDate);
				}
			});

		</script>
		<br/>
		<p>
			示例代码：(更多参数，参见用户手册)
		</p>
		<code>
			&lt;script type="text/javascript"&gt;
			<br/>
			var dateRange = new pickerDateRange('date', {
			<br/>
			isTodayValid : true,
			<br/>
			startDate : '2012-06-14',
			<br/>
			endDate : '2012-07-10',
			<br/>
			<strong>autoSubmit : true,</strong>
			<br/>
			theme : 'ta',
			<br/>
			defaultText : ' 至 ',
			<br/>
			success : function(obj) {
			<br/>
			//设置回调句柄
			<br/>
			}
			<br/>
			});
			<br/>
			&lt;/script&gt;
			<br/>
		</code>
		<!-- END -->
		<h4>三、月份选择器：</h4>
		<div id="monthContainer">
			开始时间：2012-06-14
			<br/>
			结束时间：2012-07-10
			<br/>
		</div>
		<!-- <div id="datePicker">
			<input type="text" name="date" id="date" value="" class="gri_date" style="float:left"/>
		</div -->
		 <div class="tool_date cf">
			<div class="ta_date" id="div_month_picker">
				<span class="date_title" id="month_picker"></span>
				<a class="opt_sel" id="month_trigger" href="javascript:;">
					<i class="i_orderd"></i>
				</a>
			</div>
		</div>
		<br/>
		<script type="text/javascript">
			monthPicker.create('month_picker', {
						trigger : 'month_trigger',
						autoCommit : true,
						callback : function(obj){
							$("#monthContainer").html('开始时间 : ' + obj.startDate + '<br/>结束时间 : ' + obj.endDate);
						}
					});

		</script>
		<p>
			示例代码：需额外引入日期的js和css
		</p>
		<code>
			&lt;script type="text/javascript"&gt;
			<br/>
			monthPicker.create('month_picker', {
			<br/>
			trigger : 'month_trigger',
			<br/>
			autoCommit : true,
			<br/>
			callback : function(obj){
			<br/>
			$("#monthContainer").html('开始时间 : ' + obj.startDate + '<br/>结束时间 : ' + obj.endDate);
			<br/>
			}
			<br/>
			});
			<br/>
			&lt;/script&gt;
			<br/>
		</code>
		<h4> 四、时间段对比选择：</h4>
		<div id="dCon_demo1">
		开始时间：2012-06-12
		<br/>
		结束时间：2012-07-10
		<br/>
		</div>
		<div id="datePicker_demo1">
			<input type="text" name="date" id="date_demo1" value="" class="gri_date" style="float:left" />
			
		</div> 
		<script type="text/javascript">
			//var STATS_START_TIME = '1329148800';
			var dateRange1 = new pickerDateRange('date_demo1', {
				isTodayValid : true,
				//isSingleDay : true,
				startDate : '2012-06-12',
				endDate : '2012-07-10',
				needCompare : false,
				defaultText : ' 至 ',
				target : 'datePicker_demo1',
				calendars : 3,
				//theme : 'ta',
				//shortOpr : true,
				success : function(obj) {
					$("#dCon_demo1").html('开始时间 : ' + obj.startDate + '<br/>结束时间 : ' + obj.endDate);
				}
			});
		</script>
		<br/>
		<br/>
		<p>
			示例代码：(更多参数，参见用户手册)
		</p>
		<code>
			&lt;script type="text/javascript"&gt;
			<br/>
			var dateRange = new pickerDateRange('date', {
			<br/>
			isTodayValid : true,
			<br/>
			startDate : '2012-06-12',
			<br/>
			endDate : '2012-07-10',
			<br/>
			needCompare : false,
			<br/>
			defaultText : ' 至 ',
			<br/>
			success : function(obj) {
			<br/>
			//设置回调句柄
			<br/>
			}
			<br/>
			});
			<br/>
			&lt;/script&gt;
			<br/>
		</code>
		<!-- calendar demo1 : end-->
		
		
		<!-- calendar demo2 : start -->
		<h4> 五、单天对比选择：</h4>
		<div id="dCon_demo2">
		开始时间：2012-06-11
		<br/>
		结束时间：2012-07-15
		<br/>
		</div>
		<div id="datePicker_demo2">
			<input type="text" name="date" id="date_demo2" value="" class="gri_date" style="float:left" />
		</div> 
		<br/>
		<script type="text/javascript">
			//var STATS_START_TIME = '1329148800';
			var dateRange = new pickerDateRange('date_demo2', {
				isTodayValid : true,
				startDate : '2012-06-11',
				startCompareDate : '2012-07-15',
				needCompare : true,
				singleCompare : true,
				calendars : 3,
				//theme:'ta',
				success : function(obj) {
					$("#dCon_demo2").html('开始时间 : ' + obj.startDate + '<br/>对比开始时间 : ' + obj.startCompareDate);
				}
			});

		</script>
		<br/>
		<p>
			示例代码：(更多参数，参见用户手册)
		</p>
		<code>
			&lt;script type="text/javascript"&gt;
			<br/>
			var dateRange = new pickerDateRange('date', {
			<br/>
			isTodayValid : true,
			<br/>
			startDate : '2012-06-11',
			<br/>
			startCompareDate : '2012-07-10',
			<br/>
			needCompare : true,
			<br/>
			<strong>singleCompare : true,</strong>
			<br/>
			defaultText : ' 对比 ',
			<br/>
			success : function(obj) {
			<br/>
			//设置回调句柄
			<br/>
			}
			<br/>
			});
			<br/>
			&lt;/script&gt;
			<br/>
		</code>
	</div>

</body>
</html>
